
/*普通注释  => sass文件编译为css文件时,注释会保留*/
// 静默注释 => sass文件编译为css文件时,注释会删除 (只保留在SASS源文件中，编译后被省略)
// are you ok!

// 变量
// SASS允许使用变量，所有变量以$开头。

$grey:#CCCCCC;
$warm:#FFCCCC;
$cool:#99CCCC;
$hot:#f00;

$typeArea:1226px;
$side:left;


// 函数  pxTorem   100px => 1rem  
// pxTorem(750px) => 7.5rem
@function pxTorem($val){
    // @return #{calc($val/100px)}rem;
    @return calc($val/100px)*1rem;
}




body{
    font: normal normal 14px / 18px "微软雅黑";
}

.header{
    width: $typeArea;
    height: 40px;
    line-height: 40px;
    margin:0 auto;
    // 在属性值中使用变量  => sass编译为css是 会被解析为对应的值
    background-color: $grey;
    // 在选择器 css属性名 css属性值中拼接变量  => 插值语句
    border-#{$side}: 0;

    // 嵌套语法  => sass允许在css的{}中使用嵌套语法
    // 在sass文件解析为css的过程中,会解析嵌套语法, 在被嵌套的自选择器前 添加父选择器(用空格分隔 => 默认解析为 包含选择器)  一般情况下，sass在解开一个嵌套规则时就会把父选择器（#content）通过一个空格连接到子选择器的前边
    .nav{
        float:left;

        //  // & 父选择器标识符  => 当包含父选择器标识符的嵌套规则被打开时，它不会像后代选择器那样进行拼接，而是&被父选择器直接替换：
        // & => .header .nav
        // &>li => .header .nav>li
        &>li{ 
            height: 40px;
            box-sizing: border-box;
            float:left;
            padding: 0 20px;
            border: 1px solid #999;
            position: relative;

            .subNav{
                width: 200px;
                background-color: $cool;
                text-indent: 20px;
                position: absolute;
                left: 0;
                top: 40px;
                color: #333;
                display: none;
            }

            // & 父选择器标识符  => 当包含父选择器标识符的嵌套规则被打开时，它不会像后代选择器那样进行拼接，而是&被父选择器直接替换：
            // &  => .header .nav li
            // &:hover =>  .header .nav li:hover
            &:hover{
                background-color: #6ff;
                color: #fff;

                .subNav{
                    display: block;
                }
            }
        }
        li + li{
            border-left: 0;
        }

    }

    .searchBar{
        float:right;
        margin-right: 10px;
        border: 1px solid #999;
        margin-top: 3px;
        border-radius: 3px;
        overflow: hidden;

        .search{
            width: 200px;
            height: 32px;
            float: left;
            outline: none;
            border: 0;
        }
        .searchBtn{
            display: block;
            width: 32px;
            height: 32px;
            background-color: $cool;
            float: right;
        }
    }
}



.banner{
    width: $typeArea;
}


// 计算属性  => 会将计算的结果输出到编译后的css文件中
// 加法: 两个有相同单位 / 一个有单位,一个没有单位
// 减法: 两个有相同单位 / 一个有单位,一个没有单位
// 乘法: 一个有单位,一个没有单位
// 除法: 一个有单位,一个没有单位  或 两个都有单位 => 倍数
.box{
    width: 200px + 20;
    width: 200px + 20;
    width: 200px - 20;
    width: 200px - 20;
    width: 200px * 2;
    width: calc(200px / 2);  // 100px
    width: calc(200px / 2px);   // 100
    width: pxTorem(750px);
}